<template>
  <div class="division-module" :style="heightStyle">
    <div :style="halfHeightStyle"></div>
    <div
      v-if="pageData.layout === 2"
      class="division-line"
      :style="lineStyle"
    ></div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'DivisionModule',
  props: {
    componentId: {
      type: String,
      default: ''
    },
    activityCode: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters('main', ['pageContent']),
    pageData () {
      let model = this.pageContent.componentList.find(
        a => a._id === this.componentId
      )
      return { ...model }
    },
    heightStyle() {
      return {
        height: this.pageData.h + 'px'
      }
    },
    halfHeightStyle() {
      return {
        height: +this.pageData.h / 2 + 'px',
        width: '100%'
      }
    },
    lineStyle() {
      return {
        'border-color': this.pageData.borderColor,
        'border-style': this.pageData.borderType,
        'margin-left': this.pageData.borderMargin + 'px',
        'margin-right': this.pageData.borderMargin + 'px',
      }
    }
  },
  mounted () {
    this.$sendQdas('8888110301',
      {
        item_name: '分割线组件-加载成功'
      }
    )
  }
}
</script>
<style lang="less" scoped>
.division-module {
  min-height: 5px;
  .division-line {
    border-width: 1px 0 0 0;
    transform: scaleY(0.5);
  }
}
</style>
